<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>首页</title>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
<script src="../static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
	#right{
		position: absolute;
		top: 70px;
		left:300px;
		width:1200px
	}
	td{
		text-align: center;
	}
	.option{
		text-align: center;
	}
	.all{
		margin: 0 10px 0 0 ;
	}
	#find{
		margin: 0 10px;
	}
	#add-div .form-control{
		display: inline;
		width: 200px;
	}
</style>
</head>
<body>
<div th:replace="Top :: head"></div>
<div th:replace="Top :: left"></div>
<div id="right">
<ul class="breadcrumb">
	<li><a href="/index">首页</a></li>
	<li><a href="">报销单列表</a></li>
</ul>
<div style="margin-bottom: 20px;" id="add-div">
	<!--添加员工-->
	<button type="button" onclick="location.href='/showAllUser'" class="btn btn-info all">全部员工 </button>
		<input type="text" class="form-control" id="search" name="nickname" /> 
		<button id="find" type="button" class="btn btn-success">搜索</button>
	<button class="btn btn-info add btn-primary" data-toggle="modal" data-target="#myModal1">
		新增
	</button>
</div>
<div>
<table class="table table-bordered" id="table">
		<tr>
			<td>员工编号</td>
			<td>员工账号</td>
			<td>员工密码</td>
			<td>员工姓名</td>
			<td>员工部门</td>
			<td>员工职务</td>
			<!--<td>员工邮箱</td>
			<td>员工性别</td>
			<td>员工电话</td>-->
			<td>入职时间</td>
			<td>基本工资(¥)</td>
			<td colspan="2" >操       作</td>
		 </tr>
		 <tr th:each="user : ${Users}">
            <td th:text="${user.u_id}" th:id="${user.u_id}"></td>
            <td th:text="${user.u_username}"></td>
            <td th:text="${user.u_password}"></td>
            <td th:text="${user.u_nickname}"></td>
            <td th:text="${user.d_name}"></td>
            <td th:text="${user.r_name}"></td>
           <!-- <td th:text="${user.u_email}"></td>
            <td th:text="${user.u_sex}"></td>
            <td th:text="${user.u_phone}"></td>-->
            <td th:text="${user.u_jointime}"></td>
            <td th:text="${user.u_salary}"></td>
            <td>
            	<!-- 按钮触发模态框 -->
<button class="btn btn-info modify btn-primary getOne" data-toggle="modal" data-target="#A"  th:id="${user.u_id}">
	编辑
</button>
            </td>
            <td>
            	<button class="btn btn-danger delOne" th:id="${user.u_id}" >删除</button>
            </td>
        </tr>
</table>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" th:id="A" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					编辑员工信息
				</h4>
			</div>
			<div class="modal-body">
				<p>员工编号：<input readonly="readonly" id="u_id"/></p>
				<p>员工账号：<input readonly="readonly" id="u_username"/></p>
				<p>员工密码：<input id="u_password"/></p>
				<p>员工姓名：<input id="u_nickname"/></p>
				<p><span style="float:left ;padding:5px 0px;">
					员工部门：
					</span>
					<span>
					<select name="merchantNo" class="form-control" id="d_id" style="width: 100px;">
                  		<option value="">请选择</option>
                 		<option value="2">人事部</option>
                 		<option value="3">财务部</option>
                 		<option value="4">市场部</option>
             	 	</select>
             	 	</span>
				</p>
				<p><span style="float:left ;padding:5px 0px;">
					员工职务：
					</span>
					<span>
					<select name="merchantNo" class="form-control" id="r_id" style="width: 100px;">
                  		<option value="">请选择</option>
                 		<option value="2">经理</option>
                 		<option value="3">部长</option>
                 		<option value="4">员工</option>
             	 	</select>
             	 	</span>
				</p>
				<!--<p>员工邮箱：<input id="u_email"/></p>
				<p><span style="float:left ;padding:5px 0px;">
					员工性别：
					</span>
					<span>
					<select name="merchantNo" class="form-control" id="u_sex" style="width: 100px;">
                  		<option value="">请选择</option>
                  		<option value="男">男</option>
                 		<option value="女">女</option>
             	 	</select>
             	 	</span>
				</p>				
				<p>员工电话：<input id="u_phone"/></p>-->
				<p>入职时间：<input readonly="readonly" id="u_jointime"/></p>
				<p>基本工资：<input type="number" id="u_salary"/>(元)</p>
				
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary updateUser">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade add" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					增加员工
				</h4>
			</div>
			<div class="modal-body">
				<p>员工账号：<input class="u_username"/></p>
				<p>员工密码：<input class="u_password"/></p>
				<p>员工姓名：<input class="u_nickname"/></p>
				<p><span style="float:left ;padding:5px 0px;">
					员工部门：
					</span>
					<span>
					<select name="merchantNo" class="form-control d_id" style="width: 100px;">
                  		<option value="">请选择</option>
                 		<option value="2">人事部</option>
                 		<option value="3">财务部</option>
                 		<option value="4">市场部</option>
             	 	</select>
             	 	</span>
				</p>
				<p><span style="float:left ;padding:5px 0px;">
					员工职务：
					</span>
					<span>
					<select name="merchantNo" class="form-control r_id" style="width: 100px;">
                  		<option value="">请选择</option>
                 		<option value="2">经理</option>
                 		<option value="3">部长</option>
                 		<option value="4">员工</option>
             	 	</select>
             	 	</span>
				</p>
				<!--<p>员工邮箱：<input class="u_email"/></p>
				<p>员工性别：<input type="radio" name="sex2" value="男"/>男
				<input type="radio" name="sex2" value="女"/>女</p>
				<p>员工电话：<input class="u_phone"/></p>-->
				<p>基本工资：<input type="number" class="u_salary"/>(元)</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary addUser">
					提交
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>
</body>
<script type="text/javascript">
	 //点击删除
		    $(".delOne").click(function(){
		    	if(confirm("确认这条数据删除吗？")){
			      $.ajax({
						type:"get",
						url:"delOneUser",
						async:false,
						data:{
							id:$(this).attr('id'),
						},
						dateType:"json",
						success:function(data){
							if(data=="ok"){
								alert("删除成功")
							}else{
								alert("删除失败")
							}
							location.reload()
						}
					});
					}
			    })
		    
			    
		//点击获取员工id
			    $(".getOne").bind('click',function(){
			    	var id=$(this).attr('id');
				      $.ajax({
							type:"post",
							url:"getOneUser",
							async:false,
							data:{
								id:id
							},
							success:function(data){
								var u_id=data.u_id
								var u_username=data.u_username
								var u_password=data.u_password
								var u_nickname=data.u_nickname
								var d_id=data.d_id
								var u_email=data.u_email
								var u_sex=data.u_sex
								var u_phone=data.u_phone
								var u_jointime=data.u_jointime
								var u_salary=data.u_salary
								var r_id=data.r_id
								$("#u_id").val(u_id)
								$("#u_username").val(u_username)
								$("#u_password").val(u_password)
								$("#u_nickname").val(u_nickname)
								$("#d_id").val(d_id)
								$("#u_email").val(u_email)
								$("#u_sex").val(u_sex)
								$("#u_phone").val(u_phone)
								$("#u_jointime").val(u_jointime)
								$("#u_salary").val(u_salary)
								$("#r_id").val(r_id)
							}
						});
				    })	    
		
		//点击编辑员工
			    $(".updateUser").bind('click',function(){
				      $.ajax({
							type:"post",
							url:"updateOneUser",
							async:false,
							data:{
								u_id:$("#u_id").val(),
								u_password:$("#u_password").val(),
								u_nickname:$("#u_nickname").val(),
								d_id:parseInt($("#d_id").val()),
								r_id:parseInt($("#r_id").val()),
								u_email:$("#u_email").val(),
								u_sex:$("#u_sex").val(),
								u_phone:$("#u_phone").val(),
								u_salary:parseFloat($("#u_salary").val())
							},
							success:function(data){
								if(data=="ok"){
									alert("修改成功")
								}else{
									alert("修改失败")
								}
								location.reload()
							}
						});
				    })
				    
				    
	//点击添加员工
			    $(".addUser").bind('click',function(){
				      $.ajax({
							type:"post",
							url:"addOneUser",
							async:false,
							data:{
								u_username:$(".u_username").val(),
								u_password:$(".u_password").val(),
								u_nickname:$(".u_nickname").val(),
								d_id:parseInt($(".d_id").val()),
								r_id:parseInt($(".r_id").val()),
								u_email:$(".u_email").val(),
								u_sex:$('input[name=sex2]:checked').val(),
								u_phone:$(".u_phone").val(),
								u_salary:parseFloat($(".u_salary").val())
							},
							success:function(data){
								if(data=="ok"){
									alert("添加成功")
								}else{
									alert("添加失败")
								}
								location.reload()
							}
						});
				    })
			    
			    	//搜索点击事件
	$("#find").click(function(){
		var nickname = $(this).prev().val()
		location.href="/findOne/"+nickname
		
	})
</script>
<!--设置数字不能为负数-->
<script th:inline="javascript">
$("#u_salary").blur(function(){
	var num =$(this).val() 
	/*<![CDATA[*/ 
	    if(num < 0){
		$(this).val(0)
		alert("输入数字不能为负数")
		} 
     /*]]>*/
})
$(".u_salary").blur(function(){
	var num =$(this).val() 
	/*<![CDATA[*/ 
	    if(num < 0){
		$(this).val(0)
		alert("输入数字不能为负数")
		} 
     /*]]>*/
})
 </script>
</html>